<template>
  <div style='padding:15px'>
    <vxe-toolbar id="roleId" :setting="{storage: true}" export :refresh="{query: findList}">
      <template v-slot:buttons>
        <el-button @click="findList">查询</el-button>
        <!-- <el-button @click="issueFun">下发</el-button> -->
        <el-button @click="funcFilter">打印拣货单</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      :export-config='{type:"csv"}'
      show-footer
      highlight-hover-row
      row-id="id"
      :loading="loading"
      class="mytable-footer"
      height="640"
      align="center"
      :data='tableData'
      auto-resize
    >
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="status"
          title="状态"
          min-width="150"
          sortable
          :formatter="formatterStatus"
        />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.status" placeholder="状态" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <!-- <vxe-table-column>
        <vxe-table-column
          field="issue"
          title="是否下发"
          min-width="150"
          sortable
          :formatter="formatterStatusIssue"
        />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.issue" placeholder="是否下发" clearable>
            <el-option
              v-for="item in issueList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column> -->
      <vxe-table-column>
        <vxe-table-column field="code" title="拣货单号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.code" placeholder="拣货单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="sourceCode" title="来源单号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.sourceCode" placeholder="来源单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
      <vxe-table-column field="goodsSortQuantity" title="商品种数" min-width="300" sortable />
        <template v-slot:header="{ column }">
          <el-row :gutter="20">
            <el-col :span='12'>
              <el-input
                v-model="listQuery.goodsSortQuantityStart"
                placeholder="下限"
                type='number'
                clearable
              />
            </el-col>
            <el-col :span='12'>
              <el-input
                v-model="listQuery.goodsSortQuantityEnd"
                placeholder="上限"
                type='number'
                clearable
              />
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="planQuantity" title="计划数量" min-width="300" sortable />
        <template v-slot:header="{ column }">
          <el-row :gutter="20">
            <el-col :span='12'>
              <el-input
                v-model="listQuery.planQuantityStart"
                placeholder="下限"
                type='number'
                clearable
              />
            </el-col>
            <el-col :span='12'>
              <el-input
                v-model="listQuery.planQuantityEnd"
                placeholder="上限"
                type='number'
                clearable
              />
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
     <vxe-table-column>
        <vxe-table-column field="pickingQuantity" title="拣货数量" min-width="300"  />
        <template v-slot:header="{ column }">
          <el-row :gutter="20">
            <el-col :span='12'>
              <el-input
                v-model="listQuery.pickingQuantityStart"
                placeholder="下限"
                type='number'
                clearable
              />
            </el-col>
            <el-col :span='12'>
              <el-input
                v-model="listQuery.pickingQuantityEnd"
                placeholder="上限"
                type='number'
                clearable
              />
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="notPickingQuantity" title="待拣货数量" min-width="300"  />
        <template v-slot:header="{ column }">
          <el-row :gutter="20">
            <el-col :span='12'>
              <el-input
                v-model="listQuery.notPickingQuantityStart"
                placeholder="下限"
                type='number'
                clearable
              />
            </el-col>
            <el-col :span='12'>
              <el-input
                v-model="listQuery.notPickingQuantityEnd"
                placeholder="上限"
                type='number'
                clearable
              />
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="createdName"
          title="创建人"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.createdName"
            placeholder="创建人"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="gmtCreated"
          show-header-overflow
          show-overflow
          title="创建时间"
          min-width="420"
          sortable
          :resizable="false"
        />
        <template v-slot:header>
          <el-date-picker
            v-model="gmtCreatedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtCreated')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="modifiedName"
          title="修改人"
          min-width="250"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.modifiedName"
            placeholder="修改人"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="gmtModified"
          show-header-overflow
          show-overflow
          title="修改时间"
          min-width="420"
          sortable
          :resizable="false"
        />
        <template v-slot:header>
          <el-date-picker
            v-model="gmtModifiedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtModified')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" width="180">
        <template slot-scope="scope">  <!---->
          <!-- <el-tooltip class="item" v-if="scope.row.status === '0'?true:false" effect="dark" content="下发"  placement="top">
            <vxe-button
              type="text"
              @click="issueClick(scope.row.code)"
            >
              <i class="el-icon-s-promotion" />
            </vxe-button>
          </el-tooltip> -->
          <el-tooltip class="item" effect="dark" v-if="scope.row.status === '2'?false:true" content="拣货" placement="top">
            <vxe-button
              type="text"
              @click="pickingClick(scope.row.code)"
            >
              <i class="iconfont icon-zhuangchedanguanli"/>
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <vxe-button
              type="text"
              @click="seeClick(scope.row.code)"
            >
              <i class="el-icon-document" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      :page-sizes="[10, 15, 20, 50, 100, 500, 1000]"
      @page-change="handlePageChange"
    />
    <vxe-modal v-model="modelPrintFlag" title="打印拣货单" width="900" height="800" destroy-on-close resize>
      <compPrint :printData="printData" />
    </vxe-modal>
  </div>
</template>
<script>
import { prepackaged } from '@/api/packManagement/prePackaged'
import compPrint from './components/print.vue'
import {  createBatchTask } from '@/api/store'
import '@/assets/iconfont/iconfont.css'
export default {
  name: '拣货单管理',
  components:{compPrint},
  data(){
    return{
      statusList: [
        { value: '0', label: '待拣货' },
        { value: '2', label: '拣货完成' },
      ],
      isType:true,
      gmtModifiedRange:"",
      gmtCreatedRange: '',
      issueList:[
        { value:0, label: '否' },
        { value: 1, label: '是' },
      ],
      tableData:[],
      printData:[],
      modelPrintFlag:false,
      loading:false,
      listQuery:{
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      records:[]
    }
  },
  created(){
    this.findList()
    this.$eventBus.$on("refreshList", () => {
      this.findList()
    })
  },
  methods:{
    inputBlur(e){
      let value = Number(e.target.value)
      if(!value || val < 0){
        this.isType = false
        return this.$message.error('请输入大于0的数字')
      }
      this.isType = true
    },
    findList(){
      if(!this.isType)return this.$message.error('请输入大于0的数字')
      this.loading = true
      return prepackaged(this.listQuery).then(res=>{
        this.tableData = res.data.records
        this.listQuery.total = res.data.total
        this.loading = false
      })
    },
    // @checkbox-all="selectAllEvent"
    // @checkbox-change="selectChangeEvent"
    // selectAllEvent ({ checked, records }) {
    //   if(records.length !== 0){
    //     this.records = records
    //     this.issue=false
    //     this.printing=false
    //   }else{
    //     this.records = []
    //     this.issue=true
    //     this.printing=true
    //   }
    // },
    // selectChangeEvent ({ checked, records }) {
    //   if(records.length !== 0){
    //     this.records = records
    //     this.issue=false
    //     this.printing=false
    //   }else{
    //     this.records = []
    //     this.issue=true
    //     this.printing=true
    //   }
    // },
    //打印
    funcFilter(){
      let selectRecords = this.$refs.xTable.getCheckboxRecords()
      if(selectRecords.length == 0){
        this.$message.error("请选择要打印的拣货单!");
        return
      }
      this.printData = selectRecords.map(v=>{
        return v.code
      })
      this.modelPrintFlag = true
    },
    //批量下发
    issueFun(){
      let selectRecords = this.$refs.xTable.getCheckboxRecords()
      if(selectRecords.length == 0){
        this.$message.error("请选择要下发的单据!");
        return
      }
      let codes = []
      selectRecords.forEach( i => {
        codes.push(i.code)
      })
      let params = {
        taskType: 'PICKING',
        sourceCodes: codes
      }
      this.$confirm('是否下发?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          createBatchTask(params).then((response)=>{
            this.$message({ dangerouslyUseHTMLString: true,message: response.msg, type: 'success'})
            this.findList()
          }).catch(err=>{
            this.findList()
          })
      }).catch(() => {

      });
    },
    //单个下发
    issueClick(val){
      let params = {
        taskType: 'PICKING',
        sourceCodes:val

      }
      this.$confirm('是否下发?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          createBatchTask(params).then((response)=>{
            this.$message({ dangerouslyUseHTMLString: true,message: response.msg, type: 'success'})
            this.findList()
          }).catch(err=>{
            this.findList()
          })
      }).catch(() => {

      });
    },
    //拣货
    pickingClick(val){
      this.$router.push({path:'/pack/pickiDetile',query:{code:val,isShow:true}})
      this.modifyTitle('pickiDetile', '拣货单')
    },
    //查看
    seeClick(val){
      this.$router.push({path:'/pack/pickiDetile',query:{code:val,isShow:false}})
      this.modifyTitle('pickiDetile', '查看拣货单')
    },
    formatterStatus({cellValue}){
      let obj = this.statusList.find(v=>v.value === cellValue)
      return obj.label||''
    },
    formatterStatusIssue({cellValue}){
        let obj = this.issueList.find(v=>v.value === cellValue)
        return obj.label||''

    },
        // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage;
      this.listQuery.pageSize = pageSize;
      this.findList();
    },
        // 时间
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + ' 00:00:00'
        this.listQuery[`${prefix}End`] = value[1] + ' 23:59:59'
      } else {
        this.listQuery[`${prefix}Start`] = ''
        this.listQuery[`${prefix}End`] = ''
      }
    },
  },
  destroyed() {
    this.$eventBus.$off('refreshList')
  }
}
</script>

